<!-- src/components/Icon.vue -->
<template>
  <img
    class="icon-img"
    :src="iconSrc"
    :alt="altText"
    @error="handleError" 
  />
</template>

<script setup>
import { computed, ref } from 'vue'

/**
 * 1. 定义 props：
 *    - iconId：后端返回的 ID，用来在本地目录里匹配哪张图
 *    - alt：可选的 alt 文本
 */
const props = defineProps({
  iconId: {
    type: [String, Number],
    required: true
  },
  alt: {
    type: String,
    default: ''
  }
})

const modules = import.meta.globEager('@/assets/icon/icon-*.png')
const iconMap = {}
let defaultImg = ''

for (const path in modules) {
  // path 形如 '../assets/icon/icon-1.png'
  const match = path.match(/icon-(\d+)\.png$/)
  if (match) {
    // match[1] 是 '1','2','22' 等
    const idKey = match[1]
    iconMap[idKey] = modules[path].default
  }
  // 单独检查是否是 icon-default.png
  if (path.endsWith('icon-default.png')) {
    defaultImg = modules[path].default
  }
}

/**
 * 4. computed：根据 props.iconId 查找 iconMap 中对应的 URL
 *    如果没找到，就使用 defaultImg
 */
const iconSrc = computed(() => {
  // 不管 props.iconId 是数字还是字符串，都强转成字符串再去图表里取
  const key = String(props.iconId)
  return iconMap[key] || defaultImg
})

/**
 * 5. 计算 alt 文本：如果父组件传了 alt，就用它；否则就 “Icon <id>”
 */
const altText = computed(() => {
  return props.alt || `Icon ${props.iconId}`
})

/**
 * 6. 如果 <img> 加载出现网络错误，就自动把 src 改为 defaultImg
 */
function handleError(e) {
  if (e.target.src !== defaultImg) {
    e.target.src = defaultImg
  }
}
</script>

<style scoped>
.icon-img {
  display: block;
  width: 40px;    /* 可按需调整 */
  height: 40px;   /* 可按需调整 */
  object-fit: contain;
  text-align: center;
  align-items: center;
  background-color: #f0f0f0; /* 加个浅灰背景，更好看一点 */
}
</style>
